<script setup>
	import {
		ref,
		reactive,
		watchEffect,
		provide,
		inject,
		onMounted,
		computed,
	} from 'vue'
	import { useStore } from 'vuex'
	import { useRouter } from 'vue-router'
	const store = useStore()

	const router = useRouter()
	const type = router.currentRoute.value.meta.type
	const resultBase64Url = computed(() => {
		return store.state.pageStore.resultInfo[type].resultBase64Url || ''
	})

	const base64Urls = computed(() => {
		return store.state.pageStore.resultInfo[type].base64Urls
	})

	const currentDate = ref(new Date())

	const saveImg = (result, resultIndex) => {
		var base64 = result // imgSrc 就是base64
		var byteCharacters = atob(
			base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, '')
		)
		var byteNumbers = new Array(byteCharacters.length)
		for (var i = 0; i < byteCharacters.length; i++) {
			byteNumbers[i] = byteCharacters.charCodeAt(i)
		}
		var byteArray = new Uint8Array(byteNumbers)
		var blob = new Blob([byteArray], {
			type: undefined,
		})
		var aLink = document.createElement('a')
		aLink.download = `result${resultIndex + 1}.jpg` //这里写保存时的图片名称
		aLink.href = URL.createObjectURL(blob)
		aLink.click()
	}

	const saveChangeImg = (result) => {
		var base64 = result // imgSrc 就是base64
		var byteCharacters = atob(
			base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, '')
		)
		var byteNumbers = new Array(byteCharacters.length)
		for (var i = 0; i < byteCharacters.length; i++) {
			byteNumbers[i] = byteCharacters.charCodeAt(i)
		}
		var byteArray = new Uint8Array(byteNumbers)
		var blob = new Blob([byteArray], {
			type: undefined,
		})
		var aLink = document.createElement('a')
		aLink.download = `result.jpg` //这里写保存时的图片名称
		aLink.href = URL.createObjectURL(blob)
		aLink.click()
	}
</script>
<template>
	<el-scrollbar max-height="750px">
		<div class="result-img-div">
			<div
				v-if="type != 0"
				class="result-img-card"
				v-for="(b, index) in base64Urls"
			>
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="image__preview">
						<el-image
							:src="resultBase64Url[index]"
							:preview-src-list="[resultBase64Url[index]]"
							:initial-index="4"
							:hide-on-click-modal="true"
							fit="cover"
							:z-index="10"
						/>
					</div>
					<div style="padding: 14px">
						<el-button
							type="success"
							plain
							size="large"
							class="back-step"
							@click="saveImg(resultBase64Url[index], index)"
							>Download Result</el-button
						>
						<div class="bottom">
							<time class="time">{{ currentDate }}</time>
							<el-image
								:src="b"
								:preview-src-list="[b]"
								:initial-index="0"
								:hide-on-click-modal="true"
								fit="cover"
								:z-index="10"
							/>
						</div>
					</div>
				</el-card>
			</div>
			<div class="result-img-card" v-else>
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="image__preview">
						<el-image
							:src="resultBase64Url"
							:preview-src-list="[resultBase64Url]"
							:initial-index="0"
							:hide-on-click-modal="true"
							fit="cover"
							:z-index="10"
						/>
					</div>
					<div style="padding: 14px">
						<el-button
							type="success"
							plain
							size="large"
							class="back-step"
							@click="saveChangeImg(resultBase64Url)"
							>Download Result</el-button
						>
						<div class="bottom">
							<time class="time">{{ currentDate }}</time>
							<el-image
								v-for="b in base64Urls"
								:src="b"
								:preview-src-list="base64Urls"
								:initial-index="4"
								:hide-on-click-modal="true"
								fit="cover"
								:z-index="10"
							/>
						</div>
					</div>
				</el-card>
			</div>
		</div>
	</el-scrollbar>
</template>
<style scoped lang="less">
	.result-img-div {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-top: 10%;

		.result-img-card {
			margin: 2%;
			width: 28%;
			height: 45%;

			.el-card {
				margin: 2%;
				width: 100%;
				height: 100%;
			}
			// 卡片主体
			:deep(.el-card__body) {
				width: 100%;
				height: 100%;
				> div:nth-child(1) {
					height: 70%;
					width: 100%;
					> div {
						height: 100%;
						width: 100%;
						> img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
				> div:nth-child(2) {
					height: 30%;
					width: 100%;
					> div:nth-child(1) {
						width: 100%;
					}
				}
			}
		}
	}
	.time {
		font-size: 12px;
		color: #999;
	}

	.bottom {
		width: 100%;
		height: 52%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		> .el-image {
			width: 70px;
			height: 70px;
			margin-left: 5px;
		}
	}
</style>
